<template>
  <f-border
    v-if="widgetModel"
    icon="flaticon-settings"
    ref="xBorder"
    :border="widgetModel.border"
  >
    <zk-auto-form
      :serviceConfig="widgetModel"
      ref="zkAutoForm"
      @saveForm="saveForm"
    ></zk-auto-form>
  </f-border>
</template>

<script>
import "./var.scss";
import "./styles";
export default {
  data() {
    return {
      widgetModel: null,
      firstLoad: true, // 首次加载
    };
  },
  props: {
    widget: {},
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      let par = {
        id: this.$ala.getId(),
        type: this.$ala.urlType(),
      };
      var response = await this.$ala.paasHttpGet("api/Auto/Form", par);
      if (response) {
        this.widgetModel = response;
        this.$ala.setTitle(this.widgetModel.name);
      }
      this.firstLoad = false;
    },
    async saveForm(models) {
      let parameter = {
        type: this.$ala.urlType(),
        userId: this.$ala.urlId(),
        model: JSON.stringify(models),
      };
      var response = await this.$ala.paasHttpPost("api/auto/save", parameter);
      if (response) {
        this.$ala.toMessage(response);
      }
      if (this.$refs.zkAutoForm) {
        this.$refs.zkAutoForm.setSaveStatus(false);
      }
    },
    async wathcRoute() {
      if (this.firstLoad === true) {
        return; // 第一次加载，不监听路由，防止二次触发
      }
      if (this.$ala.router().path !== "/Admin/LightApp/Edit") {
        return; // 调转到其他页面时，不执行
      }
      this.widgetModel = null;
      await this.init();
    },
  },
  watch: {
    $route: "wathcRoute",
  },
};
</script>